<template>
  <div
    :class="[
      type === 'textarea' ? 'zc-textarea' : 'zc-input',
      {
        'zc-input-group--prepend': $slots.prepend,
        'zc-input-group--append': $slots.append,
        'zc-input-group': $slots.prepend || $slots.append,
        'zc-input--prefix': $slots.prefix || prefixIcon,
        'zc-input--suffix': $slots.suffix || suffixIcon
      }
    ]"
  >
    <template v-if="type !== 'textarea'">
      <!-- 前置元素 -->
      <div v-if="$slots.prepend" class="zc-input-group__prepend">
        <slot name="prepend"></slot>
      </div>
      <input
        v-if="type !== 'number'"
        :type="showPasswrod ? (passwordVisible ? 'text' : 'password') : type"
        :disabled="disabled"
        @focus="handleFocus"
        @blur="handelBlur"
        @change="handleChange"
        @input="handleInput"
        :value="value"
        ref="input"
        :v-bind="$attrs"
        :placeholder="placeholder"
        class="el-input_inner"
        :class="getClass"
      />
      <input
        v-else
        :disabled="disabled"
        @focus="handleFocus"
        @blur="handelBlur"
        @change="handleChange"
        @input="handleInput"
        :value="value"
        ref="input"
        onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
        :v-bind="$attrs"
        :placeholder="placeholder"
        class="el-input_inner"
        :class="getClass"
      />
      <!-- 前置内容 -->
      <span class="zc-input__prefix" v-if="$slots.prefix || prefixIcon">
        <slot name="prefix"></slot>
        <i class="zc-input__icon" v-if="prefixIcon" :class="prefixIcon"></i>
      </span>
      <!-- 后置内容 -->
      <span class="zc-input__suffix" v-if="getSuffixVisible()">
        <template v-if="!showPasswrod || !isWordLimitVisible">
          <slot name="suffix"></slot>
          <i class="zc-input__icon" v-if="suffixIcon" :class="suffixIcon"></i>
        </template>
        <!-- 密码展示 -->
        <i
          class="zc-input__icon zc-input_show"
          :class="passwordVisible ? 'zc-icon-shared' : 'zc-icon-collect'"
          v-if="showPasswrod && nativeInputValue() && !disabled"
          @click="handlePasswordVisible"
        ></i>
        <!-- 清空按钮 -->
        <i
          class="zc-input__icon zc-input_clear"
          :class="clearable && nativeInputValue() ? 'zc-icon-shared' : ''"
          @mousedown.prevent
          v-if="clearable"
          @click="handleClear"
        ></i>
        <span v-if="isWordLimitVisible" class="zc-input__count">
          <span class="zc-input__count-inner">
            {{ textLength }}/{{ upperLimit }}
          </span>
        </span>
      </span>
      <!-- 后置元素 -->
      <div class="zc-input-group__append" v-if="$slots.append">
        <slot name="append"></slot>
      </div>
    </template>
  </div>
</template>

<script>
import fouce from "../mixin/fouce";

export default {
  name: "ZcInput",
  data() {
    return {
      passwordVisible: false,
      focus1: false,
      disabledInput: true,
      maxlength: this.$attrs.maxlength
    };
  },
  props: {
    value: [String, Number],
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "text"
    },
    prefixIcon: String,
    suffixIcon: String,
    showPasswrod: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    autoFoucs: {
      type: Boolean,
      default: false
    },
    showWordLimit: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    getClass() {
      return [
        { "is-disabled": this.disabled, "zc-input_inner": this.$slots.prepend }
      ];
    },
    isWordLimitVisible() {
      return (
        this.showWordLimit &&
        this.$attrs.maxlength &&
        (this.type === "text" ||
          this.type === "number" ||
          this.type === "textarea")
      );
    },
    upperLimit() {
      return this.$attrs.maxlength;
    },
    textLength() {
      if (typeof this.value === "number") {
        return String(this.value).length;
      }
      return (this.value || "").length;
    }
  },
  mixins: [fouce],
  mounted() {
    // this.setNativeInputValue()
    // eslint-disable-next-line eqeqeq
    if (this.autoFoucs) {
      this.focus("input");
    }
  },
  methods: {
    nativeInputValue() {
      return this.value === null || this.value === undefined
        ? ""
        : String(this.value);
    },
    getSuffixVisible() {
      return (
        this.$slots.suffix ||
        this.suffixIcon ||
        this.clearable ||
        this.showPassword ||
        this.isWordLimitVisible
      );
    },
    getInput() {
      return this.$refs.input || this.$refs.textarea;
    },

    handleFocus(event) {
      this.focus1 = true;
      this.$emit("focus", event);
    },
    handelBlur(event) {
      this.focus1 = false;
      this.$emit("blur", event);
    },
    handlePasswordVisible() {
      this.passwordVisible = !this.passwordVisible;
    },
    setNativeInputValue() {
      const input = this.getInput();
      if (!input) return;
      if (input.value === this.nativeInputValue()) return;
      input.value = this.nativeInputValue();
    },
    handleClear() {
      this.$emit("input", "");
      this.$emit("change", "");
      this.$emit("clear");
      this.$nextTick(() => {
        this.setNativeInputValue();
      });
    },
    handleStr() {
      const input = this.getInput();

      if (this.$attrs.maxlength <= this.textLength) {
        input.value = this.value.slice(0, this.$attrs.maxlength);
      }
    },
    handleInput(event) {
      // should not emit input during composition
      // see: https://github.com/ElemeFE/element/issues/10516
      // if (this.isComposing) return
      // hack for https://github.com/ElemeFE/element/issues/8548
      // should remove the following line when we don't support IE
      // if (event.target.value === this.nativeInputValue) return
      this.handleStr();
      this.$emit("input", event.target.value);
      // ensure native input value is controlled
      // see: https://github.com/ElemeFE/element/issues/12850
      // this.$nextTick(this.setNativeInputValue())
    },
    handleChange(event) {
      this.$emit("change", event.target.value);
      this.handleStr();
    }
  }
};
</script>

<style lang="scss">
.zc-input {
  position: relative;
  width: 100%;
  font-size: 14px;
  display: inline-block;
  vertical-align: bottom;
}
.el-input_inner {
  width: 100%;
  height: 40px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #606266;
  font-size: inherit;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  &:focus {
    outline: none;
    border-color: #409eff;
  }
}
.zc-input_inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.is-disabled {
  cursor: not-allowed;
  background: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
}
.zc-input-group {
  display: inline-table;
  border-spacing: 0;
}
.zc-input-group__append,
.zc-input-group__prepend {
  display: table-cell;
  background: #f5f7fa;
  color: #909399;
  width: 1px;
  padding: 0 20px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  border-radius: 4px;
}
.zc-input-group__prepend {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.zc-input__prefix {
  position: absolute;
  top: 0;
  left: 5px;
  color: #c0c4cc;
}
.zc-input__icon,
.zc-input__prefix {
  height: 100%;
  text-align: center;
  transition: all 0.3s;
}
.zc-input__icon {
  width: 25px;
  line-height: 40px;
}
.zc-input--prefix .el-input_inner {
  padding-left: 30px;
}
.zc-input--suffix .el-input_inner {
  padding-right: 30px;
}

.zc-input__suffix {
  position: absolute;
  right: 5px;
  top: 0;
  color: #c0c4cc;
}
.zc-input_clear,
.zc-input_show {
  cursor: pointer;
}
.zc-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.zc-input-group--append .el-input_inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.zc-input__count {
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: #909399;
  font-size: 12px;
}
.zc-input__count-inner {
  line-height: 40px;
}
</style>
